<template>
  <el-card class="stat-card" :class="[`stat-card--${type}`, { 'stat-card--loading': loading }]" shadow="hover">
    <div class="stat-card__content">
      <!-- 图标部分 -->
      <div class="stat-card__icon" :style="{ backgroundColor: iconBgColor }">
        <el-icon :size="24" :color="iconColor">
          <component :is="icon" />
        </el-icon>
      </div>
      
      <!-- 数据部分 -->
      <div class="stat-card__data">
        <div class="stat-card__value">
          <span v-if="loading" class="loading-text">---</span>
          <template v-else>
            <span class="value-number">{{ formattedValue }}</span>
            <span v-if="unit" class="value-unit">{{ unit }}</span>
          </template>
        </div>
        <div class="stat-card__label">{{ label }}</div>
        
        <!-- 趋势指示器 -->
        <div v-if="trend && !loading" class="stat-card__trend" :class="`trend--${trend.type}`">
          <el-icon :size="14">
            <ArrowUp v-if="trend.type === 'up'" />
            <ArrowDown v-if="trend.type === 'down'" />
            <Minus v-if="trend.type === 'flat'" />
          </el-icon>
          <span class="trend-value">{{ trend.value }}%</span>
          <span class="trend-label">{{ trend.label || '较昨日' }}</span>
        </div>
      </div>
    </div>
    
    <!-- 迷你图表 -->
    <div v-if="chartData && !loading" class="stat-card__chart">
      <BaseChart 
        :option="chartOption"
        width="100%"
        height="60px"
        :auto-resize="false"
      />
    </div>
    
    <!-- 操作区域 -->
    <div v-if="showAction" class="stat-card__action" @click="handleAction">
      <span>查看详情</span>
      <el-icon><ArrowRight /></el-icon>
    </div>
  </el-card>
</template>

<script setup>
import { computed } from 'vue'
import { ArrowUp, ArrowDown, Minus, ArrowRight } from '@element-plus/icons-vue'
import BaseChart from './BaseChart.vue'

const props = defineProps({
  // 数值
  value: {
    type: [Number, String],
    default: 0
  },
  // 标签
  label: {
    type: String,
    required: true
  },
  // 单位
  unit: {
    type: String,
    default: ''
  },
  // 图标
  icon: {
    type: [String, Object],
    required: true
  },
  // 类型（影响颜色主题）
  type: {
    type: String,
    default: 'primary',
    validator: (value) => ['primary', 'success', 'warning', 'danger', 'info'].includes(value)
  },
  // 趋势数据
  trend: {
    type: Object,
    default: null
    // { type: 'up|down|flat', value: number, label: string }
  },
  // 迷你图表数据
  chartData: {
    type: Array,
    default: null
  },
  // 加载状态
  loading: {
    type: Boolean,
    default: false
  },
  // 格式化函数
  formatter: {
    type: Function,
    default: null
  },
  // 是否显示操作区域
  showAction: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['action'])

// 颜色配置
const colorConfig = {
  primary: {
    iconColor: '#409EFF',
    iconBgColor: 'rgba(64, 158, 255, 0.1)',
    chartColor: '#409EFF'
  },
  success: {
    iconColor: '#67C23A',
    iconBgColor: 'rgba(103, 194, 58, 0.1)',
    chartColor: '#67C23A'
  },
  warning: {
    iconColor: '#E6A23C',
    iconBgColor: 'rgba(230, 162, 60, 0.1)',
    chartColor: '#E6A23C'
  },
  danger: {
    iconColor: '#F56C6C',
    iconBgColor: 'rgba(245, 108, 108, 0.1)',
    chartColor: '#F56C6C'
  },
  info: {
    iconColor: '#909399',
    iconBgColor: 'rgba(144, 147, 153, 0.1)',
    chartColor: '#909399'
  }
}

// 计算属性
const iconColor = computed(() => colorConfig[props.type].iconColor)
const iconBgColor = computed(() => colorConfig[props.type].iconBgColor)

// 格式化数值
const formattedValue = computed(() => {
  if (props.formatter) {
    return props.formatter(props.value)
  }
  
  const num = Number(props.value)
  if (isNaN(num)) return props.value
  
  // 千分位分隔
  if (num >= 1000000) {
    return (num / 1000000).toFixed(1) + 'M'
  } else if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'K'
  }
  
  return num.toLocaleString()
})

// 图表配置
const chartOption = computed(() => {
  if (!props.chartData) return null
  
  return {
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    },
    xAxis: {
      type: 'category',
      show: false,
      data: props.chartData.map((_, index) => index)
    },
    yAxis: {
      type: 'value',
      show: false
    },
    series: [{
      type: 'line',
      data: props.chartData,
      smooth: true,
      symbol: 'none',
      lineStyle: {
        color: colorConfig[props.type].chartColor,
        width: 2
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: colorConfig[props.type].chartColor + '40'
          }, {
            offset: 1,
            color: colorConfig[props.type].chartColor + '00'
          }]
        }
      }
    }]
  }
})

// 处理操作点击
const handleAction = () => {
  emit('action', {
    type: props.type,
    label: props.label,
    value: props.value
  })
}
</script>

<style scoped>
.stat-card {
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.stat-card--loading {
  opacity: 0.8;
}

.stat-card__content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.stat-card__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.stat-card__data {
  flex: 1;
  min-width: 0;
}

.stat-card__value {
  margin-bottom: 4px;
  line-height: 1;
}

.value-number {
  font-size: 28px;
  font-weight: 700;
  color: #303133;
}

.value-unit {
  font-size: 14px;
  color: #909399;
  margin-left: 4px;
}

.loading-text {
  font-size: 28px;
  font-weight: 700;
  color: #C0C4CC;
}

.stat-card__label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.stat-card__trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.trend--up {
  color: #67C23A;
}

.trend--down {
  color: #F56C6C;
}

.trend--flat {
  color: #909399;
}

.trend-value {
  font-weight: 600;
}

.trend-label {
  color: #909399;
}

.stat-card__chart {
  margin-top: 16px;
  height: 60px;
}

.stat-card__action {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 20px;
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.1), rgba(64, 158, 255, 0.05));
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 12px;
  color: #409EFF;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.stat-card:hover .stat-card__action {
  transform: translateY(0);
}

.stat-card__action:hover {
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.15), rgba(64, 158, 255, 0.1));
}

/* 不同类型的主题色 */
.stat-card--primary .stat-card__action {
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.1), rgba(64, 158, 255, 0.05));
  color: #409EFF;
}

.stat-card--success .stat-card__action {
  background: linear-gradient(135deg, rgba(103, 194, 58, 0.1), rgba(103, 194, 58, 0.05));
  color: #67C23A;
}

.stat-card--warning .stat-card__action {
  background: linear-gradient(135deg, rgba(230, 162, 60, 0.1), rgba(230, 162, 60, 0.05));
  color: #E6A23C;
}

.stat-card--danger .stat-card__action {
  background: linear-gradient(135deg, rgba(245, 108, 108, 0.1), rgba(245, 108, 108, 0.05));
  color: #F56C6C;
}

.stat-card--info .stat-card__action {
  background: linear-gradient(135deg, rgba(144, 147, 153, 0.1), rgba(144, 147, 153, 0.05));
  color: #909399;
}
</style>
